<template>
    <div class="cookie-tip" v-show="show">
        <p>
            PODpartner uses cookies to provide necessary site functionality and
            improve your experience. <br />
            By using our website, you agree to our
            <a href="/document/privacy-policy" target="_blank">privacy policy.</a>
        </p>
        <button type="primary" @click="doGot">Got it</button>
    </div>
</template>
<script>
export default {
    name: "CookieTip",
    data () {
        return {
            show: false,
        };
    },
    methods: {
        doGot () {
            this.show = false;
            localStorage.setItem("web_cookie_tip", "true");
        },
    },
    created () {
        if (process.client) {
            let bol = localStorage.getItem("web_cookie_tip") || false;
            if (bol) {
                this.show = false;
            } else {
                this.show = true;
            }
        }
    },
};
</script>
<style lang="scss" scoped>
.cookie-tip {
    position: fixed;
    width: 100vw;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background: rgba($color: #242424, $alpha: 1);
    color: #d9d9d9;
    z-index: 3;
    p {
        width: 50%;
        max-width: 1050px;
        color: #d9d9d9;
        font-size: 16px;
        text-align: center;
        > a {
            text-decoration: underline;
            color: #a6a6a6;
            &:hover {
                color: #ea4c89;
            }
        }
    }
    > button {
        margin-left: 52px;
        padding: 0 12px;
        border-color: #23b98f;
        background: #23b98f;
        font-size: 14px;
        color: #ffffff;
        line-height: 16px;
        white-space: nowrap;
        &:hover {
            border-color: #1ea17c;
            background: #1ea17c;
        }
    }
}

// TODO
// cookie提示适配，先隐藏
@media (max-width: 960px) {
    .cookie-tip {
        display: none;
    }
}
</style>
